<template>
  <div ref="myChart9" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import {defineComponent, toRefs, reactive, onMounted, ref} from 'vue'
import * as echarts from 'echarts'
const url1 = require('../../../assets/images/Home/one.png')
const url2 = require('../../../assets/images/Home/two.png')
const url3 = require('../../../assets/images/Home/three.png')
const url4 = require('../../../assets/images/Home/four.png')
const url5 = require('../../../assets/images/Home/five.png')
export default defineComponent({
  name: 'BoatsVerticalBarChart',
  setup() {
    const myChart9 = ref()
    let weatherIcons = {
      one:  url1,
      two: url2,
      three: url3,
      four: url4,
      five: url5,
    }
    const state = reactive({
      option: {
        grid: {
          top: '0',
          left: '10%',
          right: '15%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          // boundaryGap: [0, 0.01],
          splitLine: {     //网格线
            show: false
          },
          show: false
        },
        yAxis: {
          type: 'category',
          data: ['one', 'two', 'three', 'four', 'five'],
          inverse: true,
          axisLabel: {
            formatter: function (value) {
              return '{' + value + '| }';
            },
            margin: 0,
            rich: {
              value: {
                lineHeight: 30,
                align: 'center'
              },
              one: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.one
                }
              },
              two: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.two
                }
              },
              three: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.three
                }
              },
              four: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.four
                }
              },
              five: {
                height: 30,
                align: 'center',
                backgroundColor: {
                  image: weatherIcons.five
                }
              },
            }
          },
          splitLine: {     //网格线
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick:{
            show: false //不显示坐标轴刻度线
          },
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [10,10,10,10],
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0b1e39', // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: '#2a78ac', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#fff', // 100% 处的颜色
                    },
                  ],
                },
              }
            },
            label: {
              show: true,
              formatter: '{c|{c}}',
              position: 'left',
              offset: [350, 0],
              fontSize: 18,
              rich: {
                    c: {
                      width: 50,
                      color: '#43FFFD',
                      textBorderColor: '#000',
                      textBorderWidth: 1,
                      fontSize: 14,
                      textAlign: 'left'
                    }
               }
            },
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '5%',
            symbolSize: 30,
            showBackground: true,
            backgroundStyle: {
              color: '#0B1E39',
              borderRadius: [10,10,10,10]
            },
            data: [630230, 131744, 104970,  29034,  23489 ]
          }
        ]
      }})
    const initeCharts = () => {
      let myChart = echarts.init(myChart9.value)
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
      myChart9
    }
  },
})
</script>

<style scoped>

</style>
